This content should not be added as Global Styles yet - it is still in progress.

Colour Palette

Primary Colours

Puerto Rico

Prussian Blue

Sea Blue

Lightest (xl) #d5f0ec
Light (l) #aae0d8
Medium-light (ml) #7fd0c4
Puerto Rico #54c0b0
Dark (d) #3a9f90
Darkest (xd) #2b7469
Lightest (xl) #008fd0
Light (l) #0074a8
Medium-light (ml) #005981
Prussian Blue #003e5a
Dark (d) #002333
Darkest (xd) #00151f
Lightest (xl) #daecf5
Light (l) #9ccce4
Medium-light (ml) #5facd3
Sea Blue #3593c2
Dark (d) #287094
Darkest (xd) #1c4d66


Secondary Colours

Colour 1

Colour 2

Colour 3

Royal Blue #1c4da1
Medium-light #2565d3
Light #5287e1
Lightest #84a9ea
Mid Blue #0083ca
Medium-light #06a7ff
Light #41bcff
Lightest #7cd1ff
Teal #54b948
Medium-light #00e5e6
Light #22feff
Lightest #5dfeff

Green

Yellow / Amber

Red

Green #54b948
Medium-light (ml) #7cc973
Light (l) #a4da9d
Lightest (xl) #cbeac8
Yellow #febe10
Medium-light (ml) #fece4b
Light (l) #fede85
Lightest (xl) #ffeec0
Red #ee2447
Medium-light (ml) #f25b75
Light (l) #f691a3
Lightest (xl) #fbc8d1


Greyscale

Lightest (xxl) #f5f5f5
Lighter (xl) #e0e1e6
Light (l) #bfc2cc
Medium-light (ml) #9fa3b2
Medium (m) #7e8498
Medium-dark (md) #61677a
Dark (d) #474b59
Darkest (xd) #2d2f38

CSS Properties

                
/*Aios Colour Palette*/
    :root {
        /*Primary*/
            --PuertoRico: #54C0B0;
                /*Shades*/
                    --PuertoRico-xl: #d5f0ec;
                    --PuertoRico-l: #aae0d8;
                    --PuertoRico-ml: #7fd0c4;
                    --PuertoRico-d: #3a9f90;
                    --PuertoRico-xd: #2b7469;

            --PrussianBlue: #003E5A;
                /*Shades*/
                    --PrussianBlue-xl: #008fd0;
                    --PrussianBlue-l: #0074a8;   
                    --PrussianBlue-ml: #005981;
                    --PrussianBlue-d: #002333;
                    --PrussianBlue-xd: #00151f;
            
            --SeaBlue: #3593C2;
                /*Shades*/
                    --SeaBlue-xl: #daecf5;
                    --SeaBlue-l: #9ccce4;   
                    --SeaBlue-ml: #5facd3;
                    --SeaBlue-d: #287094;
                    --SeaBlue-xd: #1c4d66;

        /*Secondary*/
            --RoyalBlue:  #1C4DA1;   
                /*Shades*/
                    --RoyalBlue-xl: #84a9ea;
                    --RoyalBlue-l: #5287e1;
                    --RoyalBlue-md: #2565d3;

            --MidBlue:  #0083ca;   
                /*Shades*/
                    --MidBlue-xxl: #b6e5ff;
                    --MidBlue-xl: #7cd1ff;
                    --MidBlue-l: #41bcff;
                    --MidBlue-ml: #06a7ff;

            --Teal:  #00aaab;   
                    /*Shades*/ 
                        --Teal-xl: #5dfeff;
                        --Teal-l: #22feff;
                        --Teal-ml: #00e5e6;

            /*Traffic Light*/
                    --Red: #ee2447;
                        /*Shades*/
                        --Red-xl: #fbc8d1;
                        --Red-l: #f691a3;
                        --Red-ml: #f25b75;

                    --Yellow: #febe10;
                        /*Shades*/
                        --Yellow-xl: #ffeec0;
                        --Yellow-l: #fede85;
                        --Yellow-ml: #fece4b;

                    --Green: #54b948;
                        /*Shades*/
                        --Green-xl: #cbeac8;
                        --Green-l: #a4da9d;
                        --Green-ml: #7cc973;

        /*Greyscale*/
            --White:#ffffff;
                /*Grey shades*/
                    --Grey-xxl: #F5F5F5; /*Old grey-7 #f5f5f5*/
                    --Grey-xl: #e0e1e6; /*hover components, Old grey 6 E4E4E4*/
                    --Grey-l: #bfc2cc; /*Old grey 5 #D2D4DA */
                    --Grey-ml: #9fa3b2; /* Old Grey 4 #B3B5BD*/
                    --Grey-m: #7e8498; /*Disabled elements - Old grey-3 #9496A1 */
                    --Grey-md: #61677a; /*Old grey 2 #777986*/
                    --Grey-d: #474b59; /*Old grey-1: #5B5D6B;*/
                    --Grey-xd: #2d2f38;
            --Black: #000000;
        }